<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <style>
        #all{border: 1px solid red; width: 800px; height: 600px;
            margin: 0 auto;}
        #left{border: 1px solid red;width: 500px; height: 495px; float: left;overflow: auto; text-align: left;}
        #right{border: 1px solid red;width: 296px; height: 495px; float: left; overflow: auto; text-align: center;}
        #bottom{border: 1px solid red;width: 795px; height: 100px; float: left}
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        // $(function(){
        //     $.ajax({
        //         url:'loadNickList',//地址
        //                 dataType:'json',//返回的数据类型
        //                 type:'get',//请求方式
        //                 async:true,//异步//false同步
        //                 success:function(data) {
        //                     //console.log(data);
        //                     $("#right").html('');
        //                     for(var i=0;i<data.length;i++){
        //                         $("#right").append("<p>"+data[i]+"</p>");
        //                     }
        //                  }
        //
        //     })
        //
        //
        // });

        function work(){
            $.ajax({
                        url:'loadNickList',//地址
                                dataType:'json',//返回的数据类型
                                type:'get',//请求方式
                                async:true,//异步//false同步
                                success:function(data) {
                                    //console.log(data);
                                    $("#right").html('');
                                    for(var i=0;i<data.length;i++){
                                        $("#right").append("<p>"+data[i]+"</p>");
                                    }
                                 }
                    });
            $.ajax({
                url:'loadInfoList',//地址
                dataType:'json',//返回的数据类型
                type:'get',//请求方式
                async:true,//异步//false同步
                success:function(data) {
                    //console.log(data);
                    $("#left").html('');
                    for(var i=0;i<data.length;i++){
                        $("#left").append("<p>"+data[i]+"</p>");
                    }
                }
            })
        }



        setInterval("work();",1000);

        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    url:'sendMessage',//地址
                    dataType:'text',//返回的数据类型
                    type:'post',//请求方式
                    async:true,//异步//false同步
                    data:{'message':$("#message").val().trim()},
                    //data:$("#form1").serialize(),//实现form1的数据的序列化封装
                    success:function(data) {
                        if(data=='0'){
                            alert('发送消息失败!呵呵!');
                        }else{
                            alert('发送消息成功!哈哈!');
                        }

                    }
                })

            });

            $("#btn1").click(function(){
                $("#message").val('');

            });

        });
    </script>
</head>
<body>
<div id="all">
<div id="left">

</div>
    <div id="right">

    </div>
    <div id="bottom">
     <form method="post" id="form1">
    <strong><p>消息:<input type="text" id="message" name="message" size="50"></p>
    <p><input type="button" value="发送" id="btn"><input type="button" value="清空" id="btn1"></p>
        </strong>
     </form>
    </div>
</div>
</body>
</html>